<!doctype html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>折线报表</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />

        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">

        <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>


    </head>
    <body>
    <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">统计页面</a>
                <a>
                    <cite>最新气体占比图</cite></a>
            </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            地点:<select id="select_address" style="width: 150px;height: 20px">
                            <option value="">请选择</option>
                           </select>
                            <button type="button" class="layui-btn"  onclick="searchChart()">查找</button>
                            <div id="main" style="width: 1200px;height:300px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="data/sensor.js"></script>
        <script type="text/javascript" src="js/laydate/laydate.js"></script>
        <script type="text/javascript">

        function searchChart() {
            var deviceId = $("#select_address").val();
            var resultData;
            resultData = sensorServer.getSensorDataListByPage({"page":1,"rows":100,"month":"","deviceId":deviceId});
            if (resultData!=null){
                resultData=resultData.data;
            }
            initDataInfo(resultData);
        }
         $(function () {
             let result=initSelectData();
             if(!result)
                 return;
             var resultData;
             var deviceId=$("#select_address").val();
             debugger;
             if($("#select_address option").length>1&&deviceId=='')
             {
                 deviceId=$("#select_address option").eq(1).val();
                 $("#select_address").val(deviceId);
             }
             resultData = sensorServer.getSensorDataListByPage({"page":1,"rows":100,"month":"","deviceId":deviceId});
             if (resultData!=null){
                 resultData=resultData.data;
             }
             initDataInfo(resultData);
         })

        function  initSelectData() {
            var dataSensor=sensorServer.getSensorList({"page":1,"rows":1000});
            if (dataSensor!=null) {
                let optionList="";
                for(let i=0;i<dataSensor.data.length;i++){
                    optionList+="<option value='"+dataSensor.data[i].deviceid+"'>"+dataSensor.data[i].devicelocation+"-"+dataSensor.data[i].deviceid+"</option>";
                }
                $("#select_address").append(optionList);
                return true;
            }
            return  false;
        }
         function initDataInfo(resultData) {

             var data = [];
             var titleText="气体分布占比";
             for (var i=0;i<resultData.length;i++){
                 var info_CH4=new DataInfo();
                 info_CH4.name="CH4";
                 info_CH4.value=resultData[0].ch4;
                 data.push(info_CH4);

                 var info_CO2=new DataInfo();
                 info_CO2.name="CO2";
                 info_CO2.value=resultData[0].co2;
                 data.push(info_CO2);

                 var info_O2=new DataInfo();
                 info_O2.name="O2";
                 info_O2.value=resultData[0].o2;
                 data.push(info_O2);

                 var N2;
                 N2=100-resultData[0].ch4-resultData[0].co2-resultData[0].o2;

                 var info_N2=new DataInfo();
                 info_N2.name="N2";
                 info_N2.value=N2.toFixed(2);
                 data.push(info_N2);

                 titleText=titleText+":"+resultData[0].uploadtime;
                 break;
             }
             var dom = document.getElementById('main');
             var myChart = echarts.init(dom);
             myChart.setOption({
                 title: {
                    text: titleText,
                    left: 'center',
                 },
                 series : [
                     {
                         name: '访问来源',
                         type: 'pie',    // 设置图表类型为饼图
                         radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                         data:data,
                             //[          // 数据数组，name 为数据项名称，value 为数据项值
                             // {value:235, name:'视频广告'},
                             // {value:274, name:'联盟广告'},
                             // {value:310, name:'邮件营销'},
                             // {value:335, name:'直接访问'},
                             // {value:400, name:'搜索引擎'}
                         //]
                         itemStyle:{
                             normal:{
                                 label:{
                                     show: true,
                                     formatter: '{b} : {c} ({d}%)'
                                 },
                                 labelLine :{show:true}
                             }
                         }

                     }
                 ]
             })
         }

         function  DataInfo(value,name) {
               this.value=value;
               this.name=name;
         }
        //三秒自动一次
        // var  interval=setInterval('searchChart()',3000);
        // /* if 5 minutes no operation then logout --liaotuo@2017.8.20 */
        // var maxTime = 120; // seconds
        // var time = maxTime;
        // $('body').on('keydown mousemove mousedown', function(e) {
        //     time = maxTime; // reset
        // });
        // var intervalId = setInterval(function() {
        //     time--;
        //     if (time <= 0) {
        //         ShowInvalidLoginMessage();
        //         clearInterval(intervalId);
        //     }
        // }, 1000)
        // function ShowInvalidLoginMessage() {
        //     console.log("您已经长时间没操作了，即将退出自动刷新！");
        //     //TODO 做需要做的操作
        //
        //
        //     // 停止定时器
        //     clearInterval(interval );
        //
        //     //exp:关闭页面
        //     //window.close();
        // }
    </script>
    </body>
</html>
